import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import '../base/base_app.dart';

/// 创建人： Created by zhaolong
/// 创建时间：Created by  on 2021/9/25.
///
/// gongzhonghao biglead
/// github https://github.com/zhaolongs
/// bili https://space.bilibili.com/513480210
/// zhihu https://www.zhihu.com/people/zhao-long-90-89
/// csdn https://blog.csdn.net/zl18603543572
/// 西瓜视频 https://www.ixigua.com/home/3662978423
///
///
///

//应用入口
void main() {
  ///启动根目录
  runApp(BaseApp(
    homeWidget:  Example404(),
  ));
}

class Example404 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ExampleState();
  }
}

class _ExampleState extends State<Example404> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("单选框Radio"),
      ),

      body: SizedBox(
        width: double.infinity,
        child: Column(children: [
          SizedBox(height: 26,),
          buildRadioListTile(),
          SizedBox(height: 66,),
          buildRadioGroupWidget(),
        ],),
      ),
    );
  }

  ///代码清单 4-2-1  单选框Radio组件的基本使用
  ///lib/code4/example_404_radio_page.dart
  //默认选中的单选框的值
  int _groupValue = 0;
  //单选框的成组使用
  Row buildRadioGroupWidget() {
    return Row(children: [
      Radio(
        value: 0, //此单选框绑定的值 必选参数
        groupValue: _groupValue,//当前组中这选定的值  必选参数
        activeColor:Colors.red,//选中时填充颜色
        //内边距，默认最小点击区域为 48 * 48，
        // MaterialTapTargetSize.shrinkWrap 为组件实际大小
        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        //点击状态改变时的回调 必选参数
        onChanged: <int>(v) {
          setState(() {
            _groupValue = v;
          });
        },
      ),
      Radio(
        value: 1,//此单选框绑定的值 必选参数
        groupValue: _groupValue,//当前组中这选定的值  必选参数
        //点击状态改变时的回调 必选参数
        onChanged: <int>(v) {
          setState(() {
            _groupValue = v;
          });
        },
      ),
    ]);
  }
  ///代码清单 4-2-2  单选框RadioListTile组件的基本使用
  ///llib/code4/example_404_radio_page.dart
  Widget buildRadioListTile() {
    return RadioListTile(
      value: 0,// 当前对应的单选框的标识
      //是否选中发生变化时的回调， 回调的 bool 值 就是是否选中 , true 是 选中
      onChanged: <int>(value) {
        setState(() {
          _groupValue = value;
        });
      },
      // 选中时 Radio 的填充的颜色 ，
      activeColor: Colors.red,
      // 标题， selected 如果是 true
      // 如果 不设置 text 的 color 的话，
      // text的颜色使用activeColor
      title: const Text("标题"),
      // 副标题（在 title 下面）
      subtitle: const Text("副标题"),
      //是否是三行文本
      //如果是 true 副标题 不能为 null
      //如果是 false 如果没有副标题
      // 就只有一行， 如果有副标题 ，就只有两行
      isThreeLine: true,
      dense: false,// 是否密集垂直
      // 左边的控件
      secondary: Image.asset(
        "assets/images/warning_icon.png",
        height: 32,
        fit: BoxFit.fill,
      ),
      // text 和 icon 的 color 是否 是 activeColor 的颜色
      selected: false,
      //方向模型
      controlAffinity: ListTileControlAffinity.trailing,
      groupValue: _groupValue,
    );
  }
}
